@charset "UTF-8";

@import './_reset';

.navbar{
	height: 97px;
	z-index: 999;
}
.logo{
	display: flex;
	align-items: center;
	height: 100%;
	img{
		width: 100%;
		height: 100%;
	}
}
.navbar-inverse {
    background-color: #000000;
    border-color: #080808;
}
.navbar-brand {

    padding: 0px 15px;

}
.nav{
	margin-top: 23px;
	
	// height: 72px;
	>li{
		// font-size: 20px;
		position: relative;
		margin-right: 5px;
	}
	>li::before{
		content: "";
		background-color: red;
		width: 0;
		height: 1px;
		position: absolute;
		top: -5px;
		left: 50%;
		transition: all .5s;
	}
	>li:hover::before{
		width: 100%;
		left: 0;
	}
	>li:nth-child(1)::after{
		content: "小";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(2)::after{
		content: "欣";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(3)::after{
		content: "子";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(4)::after{
		content: "520";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(5)::after{
		content: "61节";
		// font-size: 100%;
		font-size: 40px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -24px;
		transition: all .5s;
	}
	>li:nth-child(6)::after{
		content: "快乐呀";
		// font-size: 100%;
		font-size: 40px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		top: 60%;
		left: 25%;
		transition: all .5s;
	}
	>li:hover::after{
		opacity: 1;
	}
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: hotpink;
	border-radius: 5px;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #fff;
    background-color: rgba(255,105,180,.5);
	border-radius: 5px;
}


@media only screen and (min-width:768px) and (max-width:991px){
	.logo{
		margin-right: 0;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.navbar-brand{
		padding-left: 3px;
		padding-right: 3px;
	}
	.nav>li>a{
		padding: 15px 15px;

	}
}


.navbar-toggle {
	  position: relative;
	  float: right;
	  padding: 9px 10px;
	  margin-top: 26px;
	  margin-right: 15px;
	  margin-bottom: 8px;
	  background-color: transparent;
	  background-image: none;
	  border: 1px solid transparent;
	  border-radius: 4px;
}



.video_box{
	// background-color: #3498db;
	background-color: #222;
	.container{
		.row{
			// margin-top: 50px;
			// margin-bottom: 50px;
			.left{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				height: 507.4px;
				align-content: space-around;
				
				.btn_box{

					text-align: center;
					
				 }
			}
			.Ghost_phone{
				background-image: url(../img/blackphone_03.png);
				background-repeat: no-repeat;
				background-position: center;
				background-color: #222222;
				padding-top: 50px;
				padding-bottom: 70px;
				text-align: center;
				position: relative;
				video{
					transform: translate(1.8px,6px);
					// transform: scale(1.05);
				}
			}
		}
	}
}
			
.box{
	width: 100%;
	height: 200px;
	background-color: black;
}





@import url(https://fonts.googleapis.com/css?family=Lato);



abbr {
  display: flex;
  color: white;
  font-size: 2em;
  font-weight: bold;
  font-family: Lato, sans-serif;
  text-decoration: none;

  span {
    text-decoration: underline white;
    transition: all 0.5s ease-in-out;

    &.hidden {
      max-width: 0;
      text-decoration: none;
      opacity: 0;
    }
  }

  &:hover {
    span {
      max-width: 2em;
      text-decoration: none;
      opacity: 1;

      &.initial {
        margin-left: 0.5em;
      }
    }
  }
}

@import url(https://fonts.googleapis.com/css?family=Lato);


.btn {
  --hue: 190;
  --ease-in-duration: 0.25s;
  --ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-duration: 0.65s;
  --ease-out-delay: var(--ease-in-duration);
  --ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  padding: 1rem 3rem;
  font-size: 1rem;
  line-height: 1.5;
  color: white;
  text-decoration: none;
  background-color: hsl(var(--hue), 100%, 41%);
  border: 1px solid hsl(var(--hue), 100%, 41%);
  outline: transparent;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: 0.25s;

  &:hover {
    background: hsl(var(--hue), 100%, 31%);
  }

  &-primary {
    --hue: 171;
  }

  &-ghost {
    color: hsl(var(--hue), 100%, 41%);
    background-color: transparent;
    border-color: hsl(var(--hue), 100%, 41%);

    &:hover {
      color: white;
    }
  }

  &-border-stroke {
    border-color: hsla(var(--hue), 100%, 41%, 0.35);

    .btn-borders {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .border-top {
        position: absolute;
        top: 0;
        width: 100%;
        height: 1px;
        background: hsl(var(--hue), 100%, 41%);
        transform: scaleX(0);
        transform-origin: left;
      }

      .border-right {
        position: absolute;
        right: 0;
        width: 1px;
        height: 100%;
        background: hsl(var(--hue), 100%, 41%);
        transform: scaleY(0);
        transform-origin: bottom;
      }

      .border-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: hsl(var(--hue), 100%, 41%);
        transform: scaleX(0);
        transform-origin: left;
      }

      .border-left {
        position: absolute;
        left: 0;
        width: 1px;
        height: 100%;
        background: hsl(var(--hue), 100%, 41%);
        transform: scaleY(0);
        transform-origin: bottom;
      }

      // when unhover, ease-out left, bottom; ease-in right, top

      .border-left {
        transition: var(--ease-out-duration) var(--ease-out-delay)
          var(--ease-out-exponential);
      }
      .border-bottom {
        transition: var(--ease-out-duration) var(--ease-out-delay)
          var(--ease-out-exponential);
      }

      .border-right {
        transition: var(--ease-in-duration) var(--ease-in-exponential);
      }
      .border-top {
        transition: var(--ease-in-duration) var(--ease-in-exponential);
      }
    }

    &:hover {
      color: hsl(var(--hue), 100%, 41%);
      background: transparent;

      .border-top,
      .border-bottom {
        transform: scaleX(1);
      }
      .border-left,
      .border-right {
        transform: scaleY(1);
      }

      // when hover, ease-in left, bottom; ease-out right, top

      .border-left {
        transition: var(--ease-in-duration) var(--ease-in-exponential);
      }
      .border-bottom {
        transition: var(--ease-in-duration) var(--ease-in-exponential);
      }

      .border-right {
        transition: var(--ease-out-duration) var(--ease-out-delay)
          var(--ease-out-exponential);
      }
      .border-top {
        transition: var(--ease-out-duration) var(--ease-out-delay)
          var(--ease-out-exponential);
      }
    }
  }

  &-text-float-up {
    &::after {
      position: absolute;
      content: attr(data-text);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transform: translateY(35%);
      transition: 0.25s ease-out;
    }

    // when hover, ease-in top-text; ease-out bottom-text

    .btn-text {
      display: block;
      transition: 0.75s 0.1s var(--ease-out-exponential);
    }

    &:hover {
      // when hover, ease-in bottom-text; ease-out top-text

      .btn-text {
        opacity: 0;
        transform: translateY(-25%);
        transition: 0.25s ease-out;
      }

      &::after {
        opacity: 1;
        transform: translateY(0);
        transition: 0.75s 0.1s var(--ease-out-exponential);
      }
    }
  }
}


